<extend name="./public/frame.html"/>
<block name="content">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-md6 layui-col-lg4">
            <div class="layui-form">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <div class="layui-inline">
                            <input type="text" class="layui-input date" readonly id="start" placeholder="添加时间--起">
                        </div>
                        <div class="layui-inline">
                            <input type="text" class="layui-input date" readonly id="end" placeholder="添加时间--止">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md4 layui-col-lg3">
            <div class="layui-btn-group">
                <button class="layui-btn" data-type="search">搜索</button>
                <button class="layui-btn layui-btn-disabled" data-type="" id="reset">复位</button>
            </div>
        </div>
    </div>
    <table class="layui-table"
           lay-data="{width:'auto', height:'auto', url:'{$url}', page: true, limit: 20, id:'log'}"
           lay-filter="log">
        <thead>
        <tr>
            <th lay-data="{field:'id', width:70, fixed: true, sort: true}">ID</th>
            <th lay-data="{field:'url', width:650}">URL</th>
            <th lay-data="{field:'param', width:400}">参数</th>
            <th lay-data="{field:'time', width:120, sort: true}">添加时间</th>
            <th lay-data="{ toolbar: '#barDemo', width:70, align:'center'}">操作</th>
        </tr>
        </thead>
    </table>

    <div class="layui-hide" id="barDemo">
     
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail" >详情</a>
   
    </div>
    <script>
        layui.use(['table','laydate'], function () {
            var table = layui.table
            , laydate = layui.laydate;
            lay('.date').each(function(){
                laydate.render({
                    elem: this
                    , theme: 'molv'
                    ,type: 'date'
                    ,trigger: 'click'
                });
            });
            //监听工具条
            table.on('tool(log)', function (obj) {
                var data = obj.data;
              if (obj.event === 'detail') {
                    //iframe层
                    var id = data.id;
                    layer.open({
                        type: 2,
                        title: '日志查看',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['960px', '100%'],
                        content: '{:url("/admin/app_log/detail","id=")}' + id //iframe的url
                    });
                }
            });

            var $ = layui.jquery, active = {
                search: function () {
                    var start = $('#start').val();
                    var end = $('#end').val();
                    var reset = $('#reset');
                    if (start||end) {
                        reset.removeClass('layui-btn-disabled').addClass('layui-btn-normal').data('type', 'reset');
                        table.reload('log', {
                            url: '{$url}',
                            where: {
                                start: start,
                                end: end,
                            } //设定异步数据接口的额外参数
                        });
                    } else {
                        reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                        layer.alert('搜索项不能为空');
                    }
                }
                , reset: function () {
                    var reset = $('#reset');
                    if (reset.data('type') !== '') {
                        table.reload('log', {
                            url: '{$url}',where:{}
                        });
                    }
                    $('.layui-input').each(function () {                        $(this).val('');                    });                $('.layui-this').each(function () {$(this).removeClass('layui-this');});
                    reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                }
            };
            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

    </script>
</block>
